<template>
  <uni-popup ref="popupRef" type="bottom" :isMaskClick="false" style="z-index: 999;">
    <view class="goods-info">
      <view class="goods-name">
        <view class="null"> </view>
        <image src="/static/icon/shop/close.png" @tap="close" class="g-img"/>
      </view>
      <view class="info">
        <image :src="checkedImg" class="goods-img" @tap="previewImg([checkedImg])" />
        <view class="info-right">
          <view class="price"> ￥<text>{{checkedSkuInfo?.price}}</text></view>
          <view class="xl"> 销量：{{checkedSkuInfo?.sale}}</view>
          <view class="kc"> 库存：{{checkedSkuInfo?.stock}}</view>
        </view>
      </view>
      <view class="btn-box">
        <view class="title">数量</view>
        <view class="min-add">
          <view class="num-btn" @tap="sub"> </view>
          <view class="num"> {{num}}</view>
          <view class="add num-btn" @tap="add"> </view>
        </view>
      </view>
      <!-- 套餐 -->
      <view class="meal" v-for="(item, index) in params.speceAll" :key="item">
        <view class="title"> {{item.title}} </view>
        <view class="list">
          <view class="item" @tap="checkedChild(index,child.id)" :class="child.selected?'a-item':''" v-for="(child, i) in item.spece_value"> {{child.title}} </view>
        </view>
      </view>
      <view class="btn" @tap="addCart"> {{isPay?'去结算':'加入购物车'}} </view>
    </view>
  </uni-popup>
</template>

<script setup>
  import { ref } from 'vue';
	import { GetGoodsSpecApi, AddToCartApi } from '@/service/index.js'
  import { previewImg } from '@/utils/index.js'
	const props = defineProps(['params', 'isPay']) // isPay 是否去结算
	const emit = defineEmits(['goPay', 'addToCart'])
  const popupRef = ref()
  const open = () => {
    popupRef.value.open()
		props.params.speceAll.forEach((item, index) => {
			item.spece_value.forEach(child => {
				if(child.selected == true) {
					speceValue.value[index] = ({spece_id: props.params.speceAll[index].id, value: child.id})
				}
			})
		})
		getGoodsSpec()
  }
  const close = () => {
    popupRef.value.close()
		num.value = 1
  }
	const num = ref(1)
	const add = () => {
		num.value = num.value + 1
	}
	const sub = () => {
		if (num.value === 1) return close()
		num.value = num.value - 1
	}
	// 点击选中的参数
	const speceValue = ref([])
	const checkedChild = (index, id) => {
		props.params.speceAll[index].spece_value.forEach(item => {
			if(item.id == id) {
				item.selected = true
				speceValue.value[index] = ({spece_id: props.params.speceAll[index].id, value: item.id})
			} else {
				item.selected = false
			}
		})
		getGoodsSpec()
	}
	//  获取多规格
	const checkedSkuInfo = ref()
	const checkedImg = ref() // 选择规格后的图片
	const checkedSku = ref() // 选择规格后的商品 sku
	const getGoodsSpec = () => {
		let params = {
			spu: props.params.spu,
			specValue: speceValue.value
		}
		GetGoodsSpecApi(params).then(res => {
			const { thumb, sku, price } = res.data.skuInfo
			checkedImg.value = thumb
			checkedSku.value = sku
			checkedSkuInfo.value = res.data.skuInfo
		})
	}
	const addCart = () => {
    if(checkedSkuInfo.value?.stock == 0) return getApp().globalData.toast('该规格已无库存，请重新选择规格')
		// 去结算
		if(props.isPay) return emit('goPay',checkedSkuInfo.value, num.value )
		// 加入购物车
		const { restrict_num, restrict_num_max } = props.params
		if(restrict_num!=0&&num.value<restrict_num) return getApp().globalData.toast('该商品'+restrict_num+'起售')
		if(restrict_num_max!=0&&num.value>restrict_num_max) return getApp().globalData.toast('该商品限购'+restrict_num_max)
		let params = {
			sku: checkedSku.value,
			num: num.value
		}
		emit('addToCart', params, num.value)
	}
  defineExpose({
    open,
    close
  })
</script>

<style lang="scss" scoped>
  .goods-info {
    width: 100%;
    background: #FFFFFF;
    padding: 20px 12px 10px;
    border-radius: 10px 10px 0px 0px;
    box-sizing: border-box;
    .goods-name {
      width: 100%;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .null {
        width: 20px;
        height: 20px;
      }
      .g-img {
        width: 20px;
        height: 20px;
      }
    }
    .info {
      display: flex;
      margin: 12px 0 18px 0;
      .goods-img {
        width: 80px;
        height: 80px;
        margin-right: 10px;
				border-radius: 10px;
      }
      .info-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 10px;
        box-sizing: border-box;
        .price {
          font-weight: 600;
          font-size: 10px;
          color: #FF3B1E;
          text {
            font-size: 15px
          }
        }
        .xl, .kc {
          font-weight: 400;
          font-size: 12px;
          color: #999999;
          line-height: 11px;
        }
      }
    }
    .btn-box {
      display: flex;
  		align-items: center;
      justify-content: space-between;
      .title {
        height: 20px;
        font-weight: 400;
        font-size: 14px;
        color: #3D3D3D;
        line-height: 20px;
      }
      .min-add {
        display: flex;
  			align-items: center;
				.num {
					font-weight: 500;
					font-size: 14px;
					color: #3D3D3D;
					margin: 0 10px;
				}
       .num-btn {
  			 width: 20px;
  			 height: 20px;
  			 background: #EEEEEE;
  			 border-radius: 10px;
  			 border-radius: 126px;
				 position: relative;
				 &::before {
					 display: block;
					 content: '';
					 position: absolute;
					 top: 50%;
					 left: 50%;
					 transform: translate(-50%, -50%);
					 width: 9px;
					 height: 2px;
					 background: #999999;
				 }
  		 }
			 .add {
				 background: #FF3B1E;
				 &::before, &::after {
				 	display: block;
				 	content: '';
				 	position: absolute;
				 	top: 50%;
				 	left: 50%;
				 	transform: translate(-50%, -50%);
				 	width: 9px;
				 	height: 2px;
				 	background: #FFFFFF;
				 }
				 &::after {
					 width: 2px;
					 height: 9px;
				 }
			 }
      }
    }
    .meal, .taste {
      .title {
        margin: 20px 0 10px;
        height: 20px;
        font-weight: 400;
        font-size: 14px;
        color: #3D3D3D;
        line-height: 20px;
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        .item {
					height: 34px;
					display: flex;
					align-items: center;
          color: #333333;
          font-size: 14px;
          padding: 0 20px;
          font-weight: 400;
          background: #F6F6F6;
          border-radius: 114px;
          margin: 0 10px 10px 0;
					box-sizing: border-box;
					&.a-item {
						color: #BF0A0F;
						background: #FFFFFF;
						border: 1px solid #BF0A0F;
						box-sizing: border-box;
					}
        }
      }
    }
    .btn {
      height: 50px;
      color: #FFFFFF;
      font-size: 17px;
      font-weight: 500;
      text-align: center;
      line-height: 50px;
      background: #FF3B1E;
      border-radius: 106px;
      margin-top: 12px;
    }
  }
</style>